<!DOCTYPE html>
<html>
<head>
	<title>TheyTube - Watch free videos online</title>
	<link rel="stylesheet" href="css/spectre.min.css">
	<link rel="stylesheet" href="css/spectre-icons.min.css">
	<meta name="theme-color" content="#ddd">
	<script src="js/vue.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<script type="text/javascript">
    window.serverAddr='101.200.54.63:9999'
    function getEmail() {
      var i=location.href.indexOf("email=")
      var vid=location.href.substring(i+6, location.href.length)
      return decodeURIComponent(vid)
    }
    function getData(pageNum) {
        var obj=new Object()
        var str=getEmail()
        obj.State=str
        obj.Info=pageNum
        var ws=new WebSocket("ws://"+window.serverAddr+"/wsGetMyVideos")
        ws.onopen=function(evt) {
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          var gobj=JSON.parse(evt.data)
          if (gobj.State=="OK") {
          	window.mainContainer.Email=str+" 的主页"
            window.mainContainer.Videos=gobj.Data
            window.mainContainer.CurPage=pageNum
            var maxPage=new Number(gobj.Info)
            if (window.mainContainer.CurPage<=1) {
              document.getElementById("me-prevPage").disabled='disabled'
            }else {
              document.getElementById("me-prevPage").disabled=''
            }
            if (window.mainContainer.CurPage>=maxPage) {
              document.getElementById("me-nextPage").disabled='disabled'
            }else {
              document.getElementById("me-nextPage").disabled=''
            }
          }else{
            console.log('my err : '+gobj.Info)
          }
          ws.close()
        }
        ws.onclose=function(evt) {
          console.log('my on close')
        }
        ws.onerror=function(evt) {
          console.log('my on err : '+evt.data)
          window.mainContainer.Email="服务器不可用"
        }
    }
	</script>
  <style type="text/css">
    a{
      text-decoration: none;
      color: #000;
      cursor: pointer;
    }
    .card{
    	margin: 10px;
    	box-shadow: 3px 3px 3px #ddd;
  	}
  </style>
</head>
<body style="padding: 0px;margin: 0px;">
<div id="main-container">

<div style="display: flex;flex-direction: column;align-items: center;box-shadow: 2px 2px 2px #ddd;">
  <div style="display: flex;width: 100%;align-items: center;">
    <span style="padding: 5px;color: #000;flex-grow: 1;"><center><big><b>{{Email}}</b></big></center></span>
    <a target="_blank" href="/index.html" style="flex-grow: 0;"><small style="margin-right: 10px;">TheyTube </small><i class="icon icon-apps" style="margin-right: 10px;color: #000;" onclick="window.open('/index.html')"></i></a>
  </div>
</div>
<div align="center">
<div id="content-div" style="max-width: 900px;width: 100%;overflow: hidden;">
	<div v-for="(video,vindex) in Videos" style="display: flex;flex-direction: row;align-items: center;">
      <img :src="video.Cover" width="160" height="90" v-on:click="jmp(video.Vid)">
      <div style="margin-left: 20px;">
        <div v-on:click="jmp(video.Vid)"><b>{{video.Title}}</b></div>
        <div style="display: flex;flex-direction: row;align-items: stretch;">
          <a v-on:click="jmp(video.Vid)">查看</a>
          <a v-on:click="showEdit(vindex)" style="margin-left: 20px;">修改</a>
          <a v-on:click="deleteVideo(vindex)" style="margin-left: 20px;">删除</a>
        </div>
      </div>
    </div>
	<div style="display: flex;justify-content: space-between;margin: 20px;">
	  <button id="me-prevPage" class="btn" disabled onclick="getData(window.mainContainer.CurPage-1)">上一页</button>
	  <span>{{CurPage}}</span>
	  <button id="me-nextPage" class="btn" onclick="getData(window.mainContainer.CurPage+1)">下一页</button>
	</div>
</div>
</div>
</div>


<script type="text/javascript">
	window.mainContainer=new Vue({
		el:"#main-container",
		data:{
			Email:'loading',
			CurPage:1,
			Videos:[]
      	}
	})
  	setTimeout("getData('1')", 50)
</script>
</body>
</html>